<template>
  <div class="salon_diagnose_10">
    <div class="diagnose_10_table">
      <table border="0" cellpadding="3">
        <colgroup>
          <col span="1" style="border: 2px solid #d2dcf4" />
          <col span="4" style="background-color: none" />
        </colgroup>
        <tr>
          <th style="width: 240px; text-align: center"></th>
          <th style="width: 240px; text-align: center">来源渠道</th>
          <th style="width: 240px; text-align: center">月平均新客数量</th>
          <th style="width: 130px; text-align: center">该流量能力评价</th>
          <th style="width: 170px; text-align: center">
            <div>
              <span>SWOT备注</span>
              <el-tooltip class="item" effect="dark" content="优势、劣势、机会窗、威胁" placement="top">
                <img
                  src="@/assets/images/question_mark.svg"
                  alt="question mark"
                  style="width: 16px; height: 16px; margin: 0 0 0 5px" />
              </el-tooltip>
            </div>
          </th>
        </tr>
        <tr v-for="item in formModel">
          <th>{{ item.name }}</th>
          <td>
            <div>
              {{ form[item.value].cc | fltChannel }}
            </div>
          </td>
          <td>
            <div>
              {{ form[item.value].cn }}
            </div>
          </td>
          <td @click.stop="handleChangeRate(item.value, 'cs', $event)">
            <el-rate v-model="form[item.value].cs" :max="3" disabled></el-rate>
          </td>
          <td>
            <div>
              <el-input
                v-model="form[item.value].swot"
                type="textarea"
                maxlength="128"
                show-word-limit
                disabled
                style="width: 180px"></el-input>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { geChanDiagnoseByNo } from '@/api/diagnose';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const EmptyChanData = {
  id: undefined,
  primaryTraffic: { cc: undefined, cn: 0, cs: 0, swot: '' },
  secondaryTraffic: { cc: undefined, cn: 0, cs: 0, swot: '' },
  tertiaryTraffic: { cc: undefined, cn: 0, cs: 0, swot: '' },
  coachId: null,
  coachName: null,
};

const EnumChannel = [
  { code: 1, name: '老带新' },
  { code: 2, name: '美团系' },
  { code: 3, name: '抖音系' },
  { code: 4, name: '小红书' },
  { code: 5, name: '其他线上方式' },
  { code: 6, name: '异业' },
  { code: 7, name: '三方渠道' },
  { code: 8, name: '自营渠道' },
  { code: 9, name: '特定圈层' },
];

const AttrC = [
  { value: 'primaryTraffic', name: '主要新流量来源' },
  { value: 'secondaryTraffic', name: '次要新流量来源' },
  { value: 'tertiaryTraffic', name: '次次要新流量来源' },
];

export default {
  name: 'Diagnose10',
  filters: {
    fltChannel(val) {
      const tmp = EnumChannel.find(x => x.code == val);
      if (tmp) {
        return tmp.name;
      }
      return '';
    },
  },
  data() {
    return {
      salon: {},
      formModel: AttrC,
      form: EmptyChanData,
      rateForm: {}, // 处理 Rate 组件不能取消第一颗星星的问题
      rules: {},
      EnumChannel: EnumChannel,
      isUpdating: false,
      isFetching: false,
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
  },
  created() {},
  methods: {
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      this.loadDiagnose10();
    },
    /**
     * 处理 Rate 组件不能取消第一颗星星的问题
     *
     * @param {string} name 属性
     * @param {string} attr 字段
     * @param {Event} event 发生点击事件的星星标签
     */
    handleChangeRate: async function (name, attr, event) {
      const target = event.target;
      const prec = this.rateForm[name];
      let preScore = 0;
      if (prec && prec[attr] !== undefined) {
        preScore = prec[attr];
      }
      if (preScore === 1 && target.classList && target.classList.contains('el-icon-star-on')) {
        this.form[name][attr] = 0;
        this.rateForm[name][attr] = 0;
      } else {
        if (prec) {
          this.rateForm[name][attr] = this.form[name][attr];
        } else {
          this.rateForm[name] = {};
          this.rateForm[name][attr] = this.form[name][attr];
        }
      }
    },
    loadDiagnose10: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      this.form = Object.assign({}, EmptyChanData);
      const errAlertMsg = '查询新客复盘信息失败';
      await geChanDiagnoseByNo(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.form.id = ret.id;
            AttrC.forEach(x => {
              if (ret[x.value]) {
                this.form[x.value].cc = ret[x.value].cc;
                this.form[x.value].cn = ret[x.value].cn;
                this.form[x.value].cs = ret[x.value].cs;
                this.form[x.value].swot = ret[x.value].swot;
              }
            });
          }
        })
        .catch(err => {
          console.log('geChanDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/salonmodel.scss';

.salon_diagnose_10 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;

  .diagnose_10_table {
    width: 100%;
    display: block;
  }

  .diagnose_10_table table {
    border-collapse: collapse;
  }

  .diagnose_10_table th {
    @extend .salon_model_lable_th;
    text-align: center;
    vertical-align: middle;
  }
  .diagnose_10_table td {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #ebeef5;
  }

  .diagnose_10_table td .in_td_title {
    margin: 0 5px 0 0;
  }
}
</style>
